<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const goProjects = () => router.push('/projects')
</script>

<template>
  <div class="p-home">
    <el-page-header content="Demo 02" title="Demo">
      <template #extra>
        <el-button @click="goProjects">项目切换</el-button>
      </template>
    </el-page-header>

    <div class="content">
      <el-card shadow="hover">
        <template #header>
          <div class="card-header">欢迎来到 Demo 02 首页</div>
        </template>
        <p>这是第二个示例子项目。</p>
        <p>访问方式：</p>
        <ul>
          <li>带前缀访问：<code>/demo_02</code> 或 <code>/#/demo_02</code></li>
          <li>项目切换页：<code>/#/projects</code></li>
        </ul>
      </el-card>
    </div>
  </div>
</template>

<style scoped>
.p-home { padding: 24px; }
.content { margin-top: 16px; }
.card-header { font-weight: 600; }
</style>